<template>
    <el-dialog v-model="dialogVisible" title="文件选择" width="30%" @close="cancelFn">
      <div class="select-file-content" v-if="fileList.length > 0">
        <el-radio-group v-model="selectedFileId">
          <el-radio v-for="item in fileList" :label="item.id" >{{ item.fileName}} </el-radio>
        </el-radio-group>
      </div>
      <div v-else>无数据</div>
      <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="confirmFn()">提交</el-button>
        <el-button @click="cancelFn">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>

import { ref} from 'vue'
import { queryFileListByBizId } from '@/api/cdnConfigurationApi.js'
import { ElMessage } from 'element-plus';

const emit = defineEmits(['submitSelectFile']);
const dialogVisible = ref(false)
const bizId = ref('')
const selectedFileId = ref('')
const fileList = ref([])

const confirmFn = () => {
  if(selectedFileId.value === ''){
    ElMessage({
        message: '请选择文件',
        type: 'warning',
    })
    return
  }
  dialogVisible.value = false
  emit('submitSelectFile',bizId.value,selectedFileId.value)

}
const cancelFn =() => {
  dialogVisible.value = false
  selectedFileId.value = ''
}
const switchVisible = (data,fromPage) => {
  dialogVisible.value = true
  if(fromPage === 'triggerPage'){
    bizId.value = data.bizId
  }
  if(fromPage === 'noTriggerPage'){
    bizId.value = data.id
  }
  getFileListByBizId()
}

const getFileListByBizId = () => {
  queryFileListByBizId({
    bizId: bizId.value
  }).then(res => {
    fileList.value = res.data.data
  })
}
defineExpose({
  switchVisible
})
</script>
<style lang="less" scoped>
.el-radio-group{
  width: 90%;
}
  ::v-deep .el-radio{
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
    display: block;
    line-height: 2;
  }
</style>